<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" id="text" required/>
        <input type="submit" name="" id="submit">
    </form>
</body>
<script>
    //案例演示1：当文本框获取焦点
    //，文本框背景为红色，当文本框失去焦点，文本框背景为黄色
    var text=document.getElementById("text")
    var form=document.getElementsByTagName("form")[0]
    text.onfocus=function(){
        this.style.backgroundColor="red"
    }
    text.onblur=function(){
        this.style.backgroundColor="green"
    }
    //案例演示2：当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台
    text.onchange=function(){
        console.log(this.value)
    }
    //案例演示3：当文本框内容改变时，立即将改变的内容输出到控制台
    text.oninput=function(){
        console.log(this.value)
    }
    //案例演示4：如果单击“submit”，则不填写文本字段，将发生警报消息
    text.oninvalid=function(){
        console.log("请您完善表单内容")
    }
    //案例演示5：当选中文本框的内容时，输出“您已经选择了文本框内容！”
    text.onselect=function(){
        console.log("您选中了文本内容")
    }
    //案例演示6：当提交表单的时候，在控制台输出“表单提交”
    form.onsubmit=function(){
        console.log("表单提交")
        return false    
    }
    
</script>
</html>